<template>
  <el-container style="height: 100%">
    <el-scrollbar>
      <el-aside width="200px">
        <CommonAside></CommonAside>
      </el-aside>
    </el-scrollbar>
    <el-container>
      <el-header height="50px"><CommonHeader></CommonHeader></el-header>
      <CommonTab></CommonTab>
      <div class="m-main">
        <router-view />
      </div>
    </el-container>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader";
import CommonAside from "../components/CommonAside";
import CommonTab from "../components/CommonTab";

export default {
  name: "Home",
  components: {
    CommonHeader,
    CommonAside,
    CommonTab,
  },
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.m-main {
  padding: 20px;
  overflow-y:auto;
}

.el-scrollbar {
  height: 100%;
  width:200px;
  flex-grow: 0;
  flex-shrink: 0;
  background: #545c64;
}
.el-container {
  height: auto;
}
</style>